<!-- eslint-disable prettier/prettier -->
<template>
  <div v-if="hasdata" class="mark">
    <div style="position: relative; padding: 20px 0">
      <div
        class="content-box"
        v-if="
          coatList.length ||
          coatSecondList.length ||
          bottomList.length ||
          bottomSecondList.length ||
          jumpSuitList.length
        "
      >
        <h3>成分唛</h3>
        <!-- 上衣 -->
        <div class="inline-block" v-if="coatList && coatList.length">
          <div v-for="(item, index) in coatList" :key="index" class="mark-info">
            <div style="width: 100%; text-align: center">
              上衣
              <span>{{
                coatSecondList && coatSecondList.length ? 1 : ''
              }}</span>
            </div>
            <div class="components">
              <!-- <div class="top-border" /> -->
              <div v-for="(value, ind) in item.markList" :key="ind">
                <div
                  v-if="value.title && value.title.indexOf('Exclusive') > -1"
                  style="
                    font-family: Muli-SemiBold;
                    font-size: 12px;
                    margin: 10px 0 5px;
                    text-align: center;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-else
                  style="
                    font-family: Muli-Bold;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 10px 0 5px;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-for="(val, inde) in value.componentDetailPos"
                  :key="inde"
                  class="inner"
                >
                  <span
                    style="
                      margin-right: 20px;
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 18px;
                    "
                    >{{ val.percent }}</span
                  >
                  <span
                    style="
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 12px;
                    "
                    >{{ val.text }}</span
                  >
                </div>
              </div>
              <div
                class="madein"
                style="font-family: Muli; font-weight: Medium; font-size: 12px"
              >
                MADE IN P.R.C<br />
                HERGESTELLT IN PRC<br />
                FABRIQUÉ EN RPC<br />
                FABRICADO EN RPC
              </div>
            </div>
          </div>
        </div>
        <!-- 上衣2 -->
        <div
          class="inline-block"
          v-if="coatSecondList && coatSecondList.length"
        >
          <div
            v-for="(item, index) in coatSecondList"
            :key="index"
            class="mark-info"
          >
            <div style="width: 100%; text-align: center">
              上衣
              <span>{{ coatList && coatList.length ? 2 : '' }}</span>
            </div>
            <div class="components">
              <!-- <div class="top-border" /> -->
              <div v-for="(value, ind) in item.markList" :key="ind">
                <div
                  v-if="value.title && value.title.indexOf('Exclusive') > -1"
                  style="
                    font-family: Muli-SemiBold;
                    font-size: 12px;
                    margin: 10px 0 5px;
                    text-align: center;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-else
                  style="
                    font-family: Muli-Bold;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 10px 0 5px;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-for="(val, inde) in value.componentDetailPos"
                  :key="inde"
                  class="inner"
                >
                  <span
                    style="
                      margin-right: 20px;
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 18px;
                    "
                    >{{ val.percent }}</span
                  >
                  <span
                    style="
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 12px;
                    "
                    >{{ val.text }}</span
                  >
                </div>
              </div>
              <div
                class="madein"
                style="font-family: Muli; font-weight: Medium; font-size: 12px"
              >
                MADE IN P.R.C<br />
                HERGESTELLT IN PRC<br />
                FABRIQUÉ EN RPC<br />
                FABRICADO EN RPC
              </div>
            </div>
          </div>
        </div>
        <!-- 下装 -->
        <div class="inline-block" v-if="bottomList && bottomList.length">
          <div
            v-for="(item, index) in bottomList"
            :key="index"
            class="mark-info"
          >
            <div style="width: 100%; text-align: center">
              下装
              <span>{{
                bottomSecondList && bottomSecondList.length ? 1 : ''
              }}</span>
            </div>
            <div class="components">
              <!-- <div class="top-border" /> -->
              <div v-for="(value, ind) in item.markList" :key="ind">
                <div
                  v-if="value.title && value.title.indexOf('Exclusive') > -1"
                  style="
                    font-family: Muli-SemiBold;
                    font-size: 12px;
                    margin: 10px 0 5px;
                    text-align: center;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-else
                  style="
                    font-family: Muli-Bold;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 10px 0 5px;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-for="(val, inde) in value.componentDetailPos"
                  :key="inde"
                  class="inner"
                >
                  <span
                    style="
                      margin-right: 20px;
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 18px;
                    "
                    >{{ val.percent }}</span
                  >
                  <span
                    style="
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 12px;
                    "
                    >{{ val.text }}</span
                  >
                </div>
              </div>
              <div
                class="madein"
                style="font-family: Muli; font-weight: Medium; font-size: 12px"
              >
                MADE IN P.R.C<br />
                HERGESTELLT IN PRC<br />
                FABRIQUÉ EN RPC<br />
                FABRICADO EN RPC
              </div>
            </div>
          </div>
        </div>
        <!-- 下装2 -->
        <div
          class="inline-block"
          v-if="bottomSecondList && bottomSecondList.length"
        >
          <div
            v-for="(item, index) in bottomSecondList"
            :key="index"
            class="mark-info"
          >
            <div style="width: 100%; text-align: center">
              下装
              <span>{{ bottomList && bottomList.length ? 2 : '' }}</span>
            </div>
            <div class="components">
              <!-- <div class="top-border" /> -->
              <div v-for="(value, ind) in item.markList" :key="ind">
                <div
                  v-if="value.title && value.title.indexOf('Exclusive') > -1"
                  style="
                    font-family: Muli-SemiBold;
                    font-size: 12px;
                    margin: 10px 0 5px;
                    text-align: center;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-else
                  style="
                    font-family: Muli-Bold;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 10px 0 5px;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-for="(val, inde) in value.componentDetailPos"
                  :key="inde"
                  class="inner"
                >
                  <span
                    style="
                      margin-right: 20px;
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 18px;
                    "
                    >{{ val.percent }}</span
                  >
                  <span
                    style="
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 12px;
                    "
                    >{{ val.text }}</span
                  >
                </div>
              </div>
              <div
                class="madein"
                style="font-family: Muli; font-weight: Medium; font-size: 12px"
              >
                MADE IN P.R.C<br />
                HERGESTELLT IN PRC<br />
                FABRIQUÉ EN RPC<br />
                FABRICADO EN RPC
              </div>
            </div>
          </div>
        </div>
        <!-- 连体衣 -->
        <div class="inline-block" v-if="jumpSuitList && jumpSuitList.length">
          <div
            v-for="(item, index) in jumpSuitList"
            :key="index"
            class="mark-info"
          >
            <div style="width: 100%; text-align: center">整体</div>
            <div class="components">
              <!-- <div class="top-border" /> -->
              <div v-for="(value, ind) in item.markList" :key="ind">
                <div
                  v-if="value.title && value.title.indexOf('Exclusive') > -1"
                  style="
                    font-family: Muli-SemiBold;
                    font-size: 12px;
                    margin: 10px 0 5px;
                    text-align: center;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-else
                  style="
                    font-family: Muli-Bold;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 10px 0 5px;
                  "
                >
                  {{ value.title }}
                </div>
                <div
                  v-for="(val, inde) in value.componentDetailPos"
                  :key="inde"
                  class="inner"
                >
                  <span
                    style="
                      margin-right: 20px;
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 18px;
                    "
                    >{{ val.percent }}</span
                  >
                  <span
                    style="
                      font-family: Muli-SemiBold;
                      font-weight: SemiBold;
                      font-size: 12px;
                    "
                    >{{ val.text }}</span
                  >
                </div>
              </div>

              <div
                class="madein"
                style="font-family: Muli; font-weight: Medium; font-size: 12px"
              >
                MADE IN P.R.C<br />
                HERGESTELLT IN PRC<br />
                FABRIQUÉ EN RPC<br />
                FABRICADO EN RPC
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="temp && sxMarks[temp]" class="content-box">
        <h3>水洗唛</h3>
        <div class="mark-info">
          <div style="width: 100%; text-align: center">正面</div>
          <div class="components">
            <!-- <div class="top-border" /> -->
            <div class="icon-box">
              <img style="width: 100%; height: 100%" :src="imgUrl" alt="" />
              <img
                style="width: 130px; height: 37px; margin: 14px 0 10px"
                src="@/assets/img/cupshe_logo.png"
                alt=""
              />
            </div>
            <div
              v-for="(item, index) in sxMarks[temp].front"
              :key="index"
              class="inner"
            >
              <span
                style="
                  margin-right: 2px;
                  font-family: Muli-SemiBold;
                  font-weight: Medium;
                  font-size: 12px;
                "
                >{{ item.language }}<span v-if="item.language">:</span></span
              >
              <span
                style="
                  font-family: Muli-SemiBold;
                  font-weight: Medium;
                  font-size: 12px;
                "
                >{{ item.info }}</span
              >
            </div>
          </div>
        </div>
        <div class="mark-info">
          <div style="width: 100%; text-align: center">反面</div>
          <div class="components">
            <div
              v-for="(item, index) in sxMarks[temp].back"
              :key="index"
              class="inner"
            >
              <span
                style="
                  margin-right: 2px;
                  font-family: Muli-SemiBold;
                  font-weight: Medium;
                  font-size: 12px;
                "
                >{{ item.language }}<span v-if="item.language">:</span>
              </span>
              <span
                style="
                  font-family: Muli-SemiBold;
                  font-weight: Medium;
                  font-size: 12px;
                "
                >{{ item.info }}</span
              >
            </div>
            <!-- <div class="bottom-border" /> -->
          </div>
        </div>
      </div>
      <a-button
        type="link"
        style="position: absolute; right: 0; top: 8px"
        @click="exportMarks"
      >
        导出唛头信息
      </a-button>
    </div>
    <div v-if="idMarkList && idMarkList.length && hasId" class="id-mark">
      <h3 class="mb10">ID唛</h3>
      <div class="id-list">
        <div v-for="(item, index) in idMarkList" :key="index" class="id-item">
          <div>{{ item.size }}</div>
          <div>{{ item.skc }}</div>
          <div>{{ item.gmtCreate }}</div>
          <div>{{ item.supplierCode }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sxMarks } from './marksInfo'
import {
  cp_card_query_mark_post,
  cp_card_export_mark_post
} from '@/server/modules/4494'
import { computed, onMounted, reactive, toRefs } from 'vue'
import { message } from 'ant-design-vue'
import img from '@/assets/img/component.png'
import img1 from '@/assets/img/component1.png'
import img2 from '@/assets/img/component2.png'
import img5 from '@/assets/img/component5.png'
import img6 from '@/assets/img/component6.png'
import img7 from '@/assets/img/component7.png'
export default {
  props: {
    params: {
      default() {
        return {}
      },
      type: Object
    },
    hasId: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const state = reactive({
      img,
      img1,
      img2,
      img5,
      img6,
      img7,
      sxMarks,
      temp: null,
      coatList: [],
      bottomList: [],
      jumpSuitList: [],
      idMarkList: [],
      hasdata: false,
      coatSecondList: [],
      bottomSecondList: []
    })
    onMounted(() => {
      getMarkList()
    })
    /* eslint-disable */
    const imgUrl = computed(() => {
      return state.temp === 'CI-001'
        ? state.img
        : state.temp === 'CI-002'
          ? state.img1
          : state.temp === 'CI-003'
            ? state.img2
            : state.temp === 'CI-004'
              ? state.img
              : state.temp === 'CI-005'
                ? state.img1
                : state.temp === 'CI-006'
                  ? state.img5
                  : state.temp === 'CI-007'
                    ? state.img6
                    : state.temp === 'CI-008'
                      ? state.img7
                      : ''
    })
    /* eslint-disable */
    const getMarkList = async () => {
      // 唛头信息所含类型 0:空 1:连体衣 2:只有上衣 3:只有下衣 4:上衣下衣混合 5 连体衣上衣下衣混合
      const { success, retInfo, data } = await cp_card_query_mark_post({
        ...props.params
      })
      if (success) {
        state.temp = data.washMarkNum
        // state.temp = 'CI-008'
        state.bottomList = data.bottomList || []
        state.coatList = data.coatList || []
        state.jumpSuitList = data.jumpSuitList || []
        state.idMarkList = data.idMarkList || []
        state.bottomSecondList = data.bottomSecondList || []
        state.coatSecondList = data.coatSecondList || []
        state.hasdata = true
      } else {
        message.error(retInfo)
      }
    }
    const exportMarks = async () => {
      const { success, retInfo, data } = await cp_card_export_mark_post({
        ...props.params
      })
      if (success) {
        const a = document.createElement('a')
        a.setAttribute('href', data)
        a.setAttribute('download', '')
        a.click()
      } else {
        message.error(retInfo)
      }
    }
    return {
      ...toRefs(state),
      exportMarks,
      getMarkList,
      imgUrl
    }
  }
}
</script>
<style lang="scss" scoped>
.content-box {
  // flex: 1;
  // overflow: hidden;
  display: inline-block;
  .mark-info {
    width: 232px;
    text-align: left;
    // float: left;
    display: inline-block;
    margin: 0 15px 15px 0;
    vertical-align: top;
  }
  .components {
    border: 1px solid #000 !important;
    width: 232px;
    height: 658px;
    margin-top: 10px;
    position: relative;
    padding: 40px 10px 40px;
    .inner {
      line-height: 15px;
      display: flex;
      margin-bottom: 7px;
      span:nth-of-type(1) {
        flex: 1;
      }
      span:nth-of-type(2) {
        flex: 5;
      }
    }
    .icon-box {
      // border-top: 1px solid #000;
      // border-bottom: 1px solid #000;
      // height:25px;
      width: 100%;
      margin: 5px 0 10px;
      text-align: center;
    }
    .top-border {
      position: absolute;
      left: 0;
      top: 40px;
      width: 100%;
      border-bottom: 1px dashed #000;
    }
    .bottom-border {
      position: absolute;
      left: 0;
      bottom: 40px;
      width: 100%;
      border-bottom: 1px dashed #000;
    }
    .madein {
      width: 80%;
      text-align: center;
      border-top: 1px solid #000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      padding: 10px 10px 0;
    }
  }
}
.id-list {
  .id-item {
    width: 160px;
    height: 160px;
    border: 1px solid #000;
    float: left;
    margin: 0 20px 20px 0;
    padding-top: 40px;
    div {
      text-align: center;
    }
  }
}
</style>
